<template>
	<view class="withdrawal">
		<view class="header_box w100">
			<view class="steps_box">
				<uni-section title="自定义图标" type="line" padding>
					<uni-steps :options="list1" active-color="#EBBE87" active-icon="compose" deactiveColor="#999999"
						:active="active" />
				</uni-section>
			</view>
		</view>
		<block v-if="active == 0">
			<input class="ipt_box s28 f500 family" type="text" v-model="name" placeholder-style="color:#AFAFAF;"
				placeholder="输入姓名" />
			<input class="ipt_box s28 f500 family" type="text" v-model="sfz" placeholder-style="color:#AFAFAF;"
				placeholder="输入身份证" />
			<view class="ipt_box  s28 f500 family" style="line-height: 88upx;" @click="btnClick">
				{{addressData.formatted_address == '' ? '选择所在区域' : addressData.formatted_address}}
			</view>
			<!-- <view class="ipt_box">
				<uni-data-picker class="uni_picker ipt_box s28 f500 family" placeholder="选择所在区域" popup-title="选择城市"
					collection="opendb-city-china" field="code as value, name as text" preload="false"
					orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code"
					@change="onchange" @nodeclick="onnodeclick">
				</uni-data-picker>
			</view> -->
		</block>
		<block v-if="active == 1">
			<view @click="upImage">
				<view class="up_image">
					<image class="w100 h100" :src="imagePicture == '' ? '../static/up_img.png' : imagePicture" mode="">
					</image>
				</view>
				<view class="txt_djsc s28 family f500 txtali">
					点击上传
				</view>
			</view>
		</block>
		<block v-if="active == 2">
			<view>
				<view class="up_sfz_img_box" @click="upSfz(1)" v-if="sfzzImage == ''">
					<view class="sfz_txt s28 family f500 txtali">
						点击上传身份证人像面
					</view>
				</view>
				<view class="img_box" v-else>
					<image class="w100 h100" :src="sfzzImage" mode=""></image>
				</view>
			</view>
			<view>
				<view class="up_sfz_img_box_c" @click="upSfz(2)" v-if="sfzfImage == ''">
					<view class="sfz_txt s28 family f500 txtali">
						点击上传身份证国勋面
					</view>
				</view>
				<view class="img_box_two" v-else>
					<image class="w100 h100" :src="sfzfImage" mode=""></image>
				</view>
			</view>

		</block>
		<view class="btn_box s32 familytow fblod txtali" v-if="name == '' || sfz == '' || addressData.formatted_address == ''">
			{{nextTxt}}
		</view>
		<view class="btn_box_ac s32 familytow fblod txtali" v-if="name != '' && sfz != '' && addressData.formatted_address != ''" @click="next">
			{{nextTxt}}
		</view>
		<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
	</view>
</template>

<script>
	import wanlAddress from '@/components/wanl-address.vue'
	export default {
		components: {
			wanlAddress
		},
		data() {
			return {
				name: '',
				sfz: '',
				nextTxt: '下一步',
				active: 0,
				list1: [{
					title: '填写信息'
				}, {
					title: '上传形象'
				}, {
					title: '身份认证'
				}],
				imagePicture: '',
				sfzzImage: '',
				sfzfImage: '',
				diqu: '',
				addressData: {
					name: '',
					mobile: '',
					default: 0,
					//地区
					country: '', // 国家
					province: '', //省份
					city: '', // 城市
					citycode: '', // 城市代码
					district: '', // 县
					adcode: '', // 地区代码
					formatted_address: '', //详细地区
					//详情
					address: '', //详细地址
					address_name: '', // 地址名称
					location: '' //经纬度
				},
			}
		},
		methods: {
			successSelectAddress(address) {
				this.addressData.country = address.country;
				this.addressData.province = address.province;
				this.addressData.city = address.city;
				this.addressData.citycode = address.citycode;
				this.addressData.district = address.district;
				this.addressData.formatted_address = address.formatted_address;
				this.addressData.location = address.location;
				this.addressData.adcode = address.adcode;
				this.addressList.location = address.location;
				this.addressList.adcode = address.adcode;
			},
			btnClick() {
				this.$refs.wanlAddress.show()
			},
			upImage() {
				this.$upLoadImage().then(res => {
					this.imagePicture = res.fullurl
				}).catch(error => {
					return false
				})
			},
			upSfz(index) {
				if (index == 1) {
					this.$upLoadImage().then(res => {
						this.sfzzImage = res.fullurl
					}).catch(error => {
						return false
					})
				} else if (index == 2) {
					this.$upLoadImage().then(res => {
						this.sfzfImage = res.fullurl
					}).catch(error => {
						return false
					})
				}

			},
			onchange(e) {
				let value = e.detail.value
				this.diqu = value[0].text + value[1].text + value[2].text
			},
			onnodeclick(node) {
				return false
			},
			next() {
				let that = this
				if (that.active < 2) {
					that.active = that.active + 1
				} else if (that.active == 2) {
					that.$request({
						url: 'user/approve',
						method: 'POST',
						data: {
							username: that.name,
							id_card: that.sfz,
							address: that.addressData.formatted_address,
							image_photo: that.imagePicture,
							front_img: that.sfzzImage,
							backend_img: that.sfzfImage
						}
					}).then(res => {
						if(res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
							setTimeout(() => {
								uni.switchTab({
									url: '../../personal/personal'
								})
							},2001)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
								
							});
						}
					})
				}
				if (that.active == 2) {
					that.nextTxt = "提交审核"
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.withdrawal {
		overflow: hidden;

		.header_box {
			height: 222upx;
			background: rgba(235, 190, 135, 0.2);
			overflow: hidden;

			.steps_box {
				margin-top: 82upx;

				.status-btn {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: row;
					align-items: center;
					justify-content: center;
					height: 92rpx;
					margin: 30rpx;
					background-color: #007AFF;
				}

				.example-body {
					/* #ifndef APP-NVUE */
					display: block;
					/* #endif */
					padding: 15px;
					flex-direction: row;
				}
			}
		}

		.ipt_box {
			width: 654upx;
			height: 88upx;
			background: #F1F1F1;
			border-radius: 44upx 44upx 44upx 44upx;
			margin: 60upx auto;
			padding-left: 32upx;

			/deep/ .uni-data-tree-input {
				margin-top: -36upx;
			}

			/deep/ .selected-area {
				font-size: 28upx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #AFAFAF;
			}

			/deep/ .input-value-border {
				border: none !important;
			}

			/deep/ .arrow-area {
				left: -30upx;
			}

			/deep/ .input-value {
				padding: 0;
			}
		}

		.btn_box {
			width: 622upx;
			height: 100upx;
			background: rgba(235, 190, 135, 0.5);
			border-radius: 50upx 50upx 50upx 50upx;
			position: fixed;
			bottom: 80upx;
			left: 64upx;
			color: #FFFFFF;
			line-height: 100upx;
		}

		.btn_box_ac {
			width: 622upx;
			height: 100upx;
			background: rgba(235, 190, 135, 1);
			border-radius: 50upx 50upx 50upx 50upx;
			position: fixed;
			bottom: 80upx;
			left: 64upx;
			color: #FFFFFF;
			line-height: 100upx;
		}

		.up_image {
			width: 360upx;
			height: 360upx;
			margin: 86upx auto;
			margin-bottom: 0;
		}

		.txt_djsc {
			color: #999999;
			margin-top: 22upx;
		}

		.up_sfz_img_box {
			width: 686upx;
			height: 366upx;
			margin: 60upx auto;
			background-image: url("");
			background-size: 100% 100%;
			position: absolute;
			top: 220upx;
			left: 32upx;

			.sfz_txt {
				color: #666666;
				line-height: 654upx;
			}
		}

		.img_box {
			width: 686upx;
			height: 366upx;
			margin: 60upx auto;
			border-radius: 36upx;
			overflow: hidden;
			position: absolute;
			top: 220upx;
			left: 32upx;
		}

		.img_box_two {
			width: 686upx;
			height: 366upx;
			margin: 60upx auto;
			border-radius: 36upx;
			overflow: hidden;
			position: absolute;
			left: 28rpx;
			bottom: 312upx;

		}

		.up_sfz_img_box_c {
			width: 686upx;
			height: 366upx;
			margin: 60upx auto;
			background-image: url("");
			background-size: 100% 100%;
			position: absolute;
			left: 28rpx;
			bottom: 312upx;
			.sfz_txt {
				color: #666666;
				line-height: 654upx;
			}
		}
	}
</style>
